<template>
  <div class="addAccount">
    <el-dialog
      title="新增账号"
      center
      :visible.sync="addDialogVisible"
      width="40%"
      :before-close="addAccountCancel"
      @open="getNameList()"
    >
      <el-form
        label-width="100px"
        :model="accountList"
        :rules="rules"
        ref="accountList"
      >
        <el-form-item label="选择人员" prop="userName">
          <el-select v-model="userName" value-key="uid"  placeholder="请选择">
            <el-option
              v-for="(item,index) in nameList"
              :key="index"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择角色" prop="rname">
          <el-table
            :data="roleList"
            ref="multipleTable"
            border
            tooltip-effect="dark"
            style="width: 100%"
            @select="handleSelection"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="rname" label="员工姓名" align="center">
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addAccountCancel">取 消</el-button>
        <el-button type="primary" @click="addAccount">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getUser, getRole } from "../../../api/account";
export default {
  name: "AddAccount",
  props: ["addDialogVisible"],  //接收父组件传过来的值
  data() {
    return {
      nameList: [],   //存放请求的人员
      roleList: [],    //存放请求的角色
      userRolesList: [],   //存放选择的人员
      userName: "",   
      accountList: { userName: "", name: "", uid: 0, userRoles: [] },
      rules: {
        userName: [
          { required: true, message: "请输入人员姓名", trigger: "blur" },
        ],
        rname: [{ required: true, message: "请选择角色", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 获取人员和角色数据
    getNameList() {
      getUser().then((res) => {
        this.nameList = res.data;
      });
      getRole().then((res) => {
        this.roleList = res.data;
      });
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 选择表格行
    handleSelection(selection, row) {
      this.selectRows = row;
      this.selectTotal = selection.length;
      this.userRolesList = selection;
    },
    // 取消新增按钮
    addAccountCancel() {
      this.$emit("addAccountCancel", false);
      this.userName = "";
      this.accountList.userRoles = [];
      this.$refs.multipleTable.clearSelection();
      this.$message("已取消新增");
    },
    // 确定新增按钮
    addAccount() {
      if (this.userName == "" || this.accountList.userRoles == []) {
        this.$message({
          message: "请填写必填项",
          type: "warning",
        });
      } else {
        this.accountList.userRoles = [];
        (this.accountList.userName = this.userName.userName),
          (this.accountList.name = this.userName.name),
          (this.accountList.uid = this.userName.uid);
        var list = this.userRolesList;
        list.forEach((list) => {
          this.accountList.userRoles.push({   //将选择的人员的id遍历在所返回数据的中间表
            roleId: list.id,
          });
        });
        this.$emit("addAccount", this.accountList, false);
        this.userName = "";
        this.$refs.multipleTable.clearSelection();
      }
    },
  },
};
</script>
<style lang="scss" scoped></style>
